
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <video id="video" controls width="60%"></video>
  <script src="./hls.js"></script>
  <script>
    if (Hls.isSupported()) {
      var video = document.getElementById('video');
      var hls = new Hls();
      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        console.log('video and hls.js are now bound together !');
      });
      hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
        console.log(
          'manifest loaded, found ' + data.levels.length + ' quality level',
        );
        // 跳转到第30秒
        //video.currentTime = 300;

      });
      hls.loadSource('./file/index.m3u8');
      // bind them together
      hls.attachMedia(video);
      
    }
  </script>
</body>

</html>